<script lang="ts" setup>
import { defineProps } from 'vue';

 defineProps({
  bodyBackGroundColor: {
    type: String,
    required: false,
    default: '#ffffff'
  },
  hasTitle: {
    type: Boolean,
    required: false,
    default: false
  },
  hasDriver: {
    type: Boolean,
    required: false,
    default: false
  },
  hasSearch: {
    type: Boolean,
    required: false,
    default: false
  },
  hasFoot: {
    type: Boolean,
    required: false,
    default: false
  },
  hasBody: {
    type: Boolean,
    required: false,
    default: false
  },
  hasBodyTitle: {
    type: Boolean,
    required: false,
    default: false
  }
});
</script>

<template>
  <div class="lz-panel-box">
    <div v-if="hasTitle" class="lz-panel-box-title">
      <span>
        <slot name="title" />
      </span>
    </div>

    <div v-if="hasSearch" class="lz-panel-box-body-components">
      <div class="lz-panel-box-body-components-box">
        <slot name="from-search" />
      </div>
      <div class="lz-panel-box-body-components-action">
        <slot name="from-search-action" />
      </div>
    </div>

    <div
        v-if="hasBodyTitle"
        class="lz-panel-box-body-title"
    >
      <!--
      :style=" hasDriver ?'border-bottom: 1px solid #4e596920;' : '' "
   -->

      <div class="body-title-box">
        <span class="lz-panel-box-body-title-span">
          <slot name="body-title" />
        </span>
        <div class="lz-panel-box-body-title-label">
          <slot name="body-label" />
        </div>
      </div>
      <div class="lz-panel-box-body-title-components">
        <slot name="body-button" />
      </div>

    </div>
    <div v-if="hasDriver" class="lz-panel-box-body-title-bottom">
      <div class="lz-panel-box-body-title-bottom-line" />
    </div>
    <div
        v-if="hasBody"
        class="lz-panel-box-body"
        :style="hasFoot === false ? 'border-radius:0px 0px 10px 10px;background-color:'+bodyBackGroundColor+';' : 'background-color:'+bodyBackGroundColor+';'"
    >
      <slot name="body-table" />
    </div>
    <div v-if="hasFoot" class="lz-panel-box-foot">
      <div class="lz-panel-box-foot-action">
        <slot name="body-table-action-button" />
      </div>
      <div class="lz-panel-box-foot-page">
        <slot name="body-table-action-pagination" />
      </div>
    </div>
  </div>
</template>


<style lang="scss">

.lz-panel-box {
  width: calc(100% - 30px);
  margin: 15px auto;
  padding-bottom: 0px;

  .el-form-item__label {
    font-weight: unset;
  }

  .el-form-item {
    margin-bottom: 0px;
  }

  .lz-panel-box-body-components {
    width: 100%;
    height: auto;
    padding: 15px 15px;
    display: flex;
    border-radius: 10px;
    background-color: #FFFFFF;

    .lz-panel-box-body-components-box {
      width: 100%;
      height: auto;
    }

    .lz-panel-box-body-components-action {
      width: auto;
      height: 33px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
  }
  .lz-panel-box-body-title-bottom {
    width: 100%;
    height: 1px;
    background-color: #FFFFFF;

    .lz-panel-box-body-title-bottom-line{
      width: calc(100% - 30px);
      height: 1px;
      margin: 0 auto;
      background-color: #dedede;
    }
  }

  .lz-panel-box-body-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    //width: 100%;
    background-color: #FFFFFF;
    margin-top: 15px;
    height: 60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0 15px;

    .body-title-box{
      display: flex;
      align-items: center;
      justify-content: space-between;

      .lz-panel-box-body-title-label{
        width: auto;
        min-height: 20px;
        margin-top: 4px;
      }
      .lz-panel-box-body-title-span {
        font-size: 18px;
        font-weight: bold;
        line-height: 60px;
        text-indent: 15px;
        margin-right: 15px; /* 调整与相邻元素的间距 */
      }

    }
    .lz-panel-box-body-title-components {
      width: auto;
      height: 33px;
      margin-top: 13px;
    }
  }

  .lz-panel-box-body {
    //width: 100%;
    height: auto;
    padding: 15px;
  }

  .lz-panel-box-foot {
    width: 100%;
    height: auto;
    min-height: 50px;
    padding: 15px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: #FFFFFF;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    .lz-panel-box-foot-action {
      width: 100px;
    }

    .lz-panel-box-foot-page {
      width: auto;
    }
  }

  .lz-panel-box-title {
    width: calc(100% - 30px);
    height: 60px;
    line-height: 60px;
    margin: 0px auto;

    span {
      font-size: 18px;
      font-weight: bold;
    }
  }
}

</style>
